import React, { Component } from 'react';
import { connect } from 'dva';
import { Form, Divider, Badge } from 'antd';
import { withRouter } from 'umi';
import moment, { isDate } from 'moment';
import StandardTable from '@/components/StandardTable';
import AntdInput from '@/components/AntdInput';
import AdSelect from '@/components/AdSelect';
import AdModal from '@/components/AdModal';
import AntdForm from '@/components/AntdForm';
import AdButton from '@/components/AdButton';
import AntdDatePicker from '@/components/AntdDatePicker';
import FileReader from '@/components/FileReader';
import AntdSelectRegion from '@/components/AntdSelectRegion';
import SearchSelect from '@/components/SearchSelect';
import { allDictList } from '@/utils/constans';
import { queryDict, filterAddFile, filterDeteteFile, formatPrice } from '@/utils/common';
import { columnsDriver } from '@/pages/Common/common';
import { selectDetail, ocrCompanyList, ocrVDList, allDispatchType, renderTableAdSelect, codes, formateNOSecond } from './utils';
import OcrPaperDetailInfo from './OcrPaperDetailInfo';
const dateFormat = 'YYYY-MM-DD';

@connect(({ paperVerify, component, loading }) => ({
  dictObject: component.dictObject,
  ocrDetails: paperVerify.ocrDetails,
  // loading: loading.effects[allDispatchType.incidentalInfo],
}))
@Form.create()
@withRouter
export default class OcrPaperListInfo extends Component {
  constructor(props) {
    super(props);
    this.state = {
    };
    this.className = 'OcrPaperListInfo-table';
  }
  componentDidMount() { }
  handleStateChange = (options = []) => {
    options.map(item => {
      this.setState(item);
    });
  };
  showDetail = (e, record) => {
    const { setStateChange, setInfoModal } = this.props;
    setInfoModal();
    setStateChange([{ papersType: record.papersType, papersId: record.id, showUpload: false }])
    //获取证件详情：
    selectDetail({
      type: allDispatchType.ocrPapersInfo,
      payload: { id: record.id },
      props: this.props,
    })
  }
  columns = [
    {
      title: '证件类型',
      dataIndex: 'papersType',
      // width: 100,
      render: (text, record) => {
        const { ocrType } = this.props;
        const typeList = ocrType === 'COMPANY' ? ocrCompanyList : ocrVDList
        const formatText = renderTableAdSelect({
          props: this.props,
          value: text,
          data: typeList,
        })
        return <AdButton
          mode="a"
          onClick={e => this.showDetail(e, record)}
          text={formatText}
          code={codes.paperDetail}
        />
      }
    },
    {
      title: '提交时间',
      dataIndex: 'createTime',
      render: text => moment(text).format(formateNOSecond),
    },
  ];
  render() {
    const { alreadyAddPaper, setInfoModal, papersId, papersType, ocrId, ocrType, loading, ocrDetails, visible, showUpload, disabled } = this.props;

    const detail = ocrDetails[ocrId] || {};
    const paperlist = detail
      ? { list: detail.papersList || [] }
      : {};
    return (
      <div>
        <AdModal
          visible={visible}
          title='证件信息'
          onOk={this.handleOk}
          onCancel={() => {
            setInfoModal()
          }}
          width="600px"
          bodyStyle={{
            height: 'calc(100vh - 100px)',
            overflowY: 'auto',
            padding: '12px 12px 0 12px',
            // background: '#F0F2F5',
          }}
          footer={null}
        >
          <OcrPaperDetailInfo
            setInfoModal={setInfoModal}
            setStateChange={this.handleStateChange}
            setLastStateChange={this.props.setStateChange}
            papersId={papersId} papersType={papersType}
            ocrId={ocrId} ocrType={ocrType}
            showUpload={showUpload}
            disabled={disabled}
            alreadyAddPaper={alreadyAddPaper}
          />
        </AdModal>
        <AntdForm>
          <StandardTable
            loading={loading}
            data={paperlist}
            columns={this.columns}
            disabledRowSelected={true}
            pagination={false}
            scrollY={200}
            // scrollX={600}
            // className={this.className}
            codes="a"
          />
        </AntdForm>
      </div>
    );
  }
}
